<template>
	<view class="main-box">
		<scroll-view class="my-list" scroll-y="true" :style="{'height': `calc(100vh - ${safeBottom}px - 100rpx)`}">
			<view class="bg-box"
				:style="{ 'background-image': `url(${userInfo.backgroundImage ? userInfo.backgroundImage : '/static/bg.jpeg'})` }">
				<view class="user-backgroud-img">
					<view class="navigator-bar" :style="{'padding-top': safeTop + 'px'}">
						<image class="navigator-img" src="/static/backArrow.png" @click="back()"></image>
						<!-- <image class="navigator-img" src="/static/moreBtn.png" @click="jumpTo('setting')"></image> -->
					</view>
					<view class="avatar-box">
						<image class="avatar-img" :src="userInfo.avatar"></image>
					</view>
					<text class="nickname-text">{{ userInfo.nickName }}</text>
					<view class="user-info-box">
						<text
							class="user-info-text">{{ userInfo.sex === 0 ? '女' : '男'}}丨{{ userInfo.age }}岁丨{{ userInfo.city + ' ' + userInfo.region }}</text>
						<view class="score-text">信用分 {{ userInfo.score }}</view>
					</view>
					<view class="interest-box">
						<text class="interest-text" v-for="(label, index) of interests"
							v-if="index < 6">{{ index === 5 ? '...' : label }}</text>
					</view>
					<view class="introduction-text">{{ userInfo.signature ? userInfo.signature : '这家伙很懒什么也没留下'}}</view>
					<view class="count-box">
						<text class="count-text" @click="jumpToUserList(0)">关注
							{{ userInfo.follows ? userInfo.follows : 0 }}</text>
						<text class="count-text" @click="jumpToUserList(1)">粉丝
							{{ userInfo.fans ? userInfo.fans : 0 }}</text>
						<text class="count-text">获赞 {{ userInfo.clicks ? userInfo.clicks : 0 }}</text>
					</view>
					<view class="partake-box">
						<view class="partake-item" @click="jumpToList(0)">
							<text class="partake-count">{{ userInfo.interesteds ? userInfo.interesteds : 0 }}</text>
							<text class="partake-title">感兴趣</text>
						</view>
						<view class="partake-line"></view>
						<view class="partake-item" @click="jumpToList(1)">
							<text class="partake-count">{{ userInfo.activitys ? userInfo.activitys : 0 }}</text>
							<text class="partake-title">集合过</text>
						</view>
					</view>
				</view>
			</view>
			<view class="tab-bar-box">
				<view :class="index === 0 ? 'choose-tab-bar' : 'unchoose-tab-bar'" @click="changeIndex(0)">
					{{ '活动 ' + userActivity.length }}
				</view>
				<!-- <view :class="index === 1 ? 'choose-tab-bar' : 'unchoose-tab-bar'" @click="changeIndex(1)">{{ '优惠' + myDiscount.length }}</view> -->
				<view :class="index === 2 ? 'choose-tab-bar' : 'unchoose-tab-bar'" @click="changeIndex(2)">
					{{ '动态' + userDynamic.length }}
				</view>
			</view>
			<view class="my-activity-list" v-if="index === 0">
				<view class="activity-box" v-for="activity of userActivity" @click="chooseActivity(activity.id)">
					<view class="img-box">
						<image class="activity-img" :src="activity.cover"></image>
					</view>
					<view class="content-box">
						<view class="activity-title-box">
							<view class="activity-title">{{ activity.name }}</view>
							<!-- <image class="title-img" src="/static/more.png"></image> -->
						</view>
						<view class="activity-labels">
							<view class="label-item" v-for="label of activity.labels.split(',')">{{ label }}</view>
						</view>
						<view class="price-box">
							<view class="price-text" v-if="activity.cost">¥{{ activity.cost }}<text
									class="price-unit">/人</text></view>
							<view class="free" v-if="!activity.cost">免费</view>
							<view class="user-box">
								<view class="activity-avatar-box" v-for="(user, index) of activity.activityUserList"
									v-if="index < 3"
									:style="{'left': `-${(index + 1) * 26}rpx`, 'z-index': 100 - index}">
									<image class="avatar-img" :src="user.avatar"></image>
								</view>
								<view class="user-num">{{ activity.activityUserList.length }}/{{ activity.maxPerson }}
								</view>
							</view>
						</view>
						<view class="status-box">
							<view class="concern-num">{{ activity.likeNum ? activity.likeNum : 0 }}人感兴趣</view>
							<view :class="activity.status === 1 ? 'openning' : 'close'">
								{{ activity.status === 1 ? '集合中' : (activity.status === 2 ? '集合结束' : '已取消')}}
							</view>
						</view>
					</view>
				</view>
				<view style="height: 40rpx;"></view>
				<uni-load-more :status="status" :contentText="contentText"></uni-load-more>
				<view style="height: 40rpx;"></view>
			</view>
			<!-- <view class="my-discount-list" v-if="index === 1">
				<view style="height: 40rpx;"></view>
				<uni-load-more :status="status" :contentText="contentText"></uni-load-more>
				<view style="height: 40rpx;"></view>
			</view> -->
			<view class="my-dynamic-list" v-if="index === 2">
				<view class="social-item-box" v-for="dynamic of userDynamic">
					<view class="user-info-box">
						<view class="user-info">
							<text class="name-text">{{ userInfo.nickName }}</text>
							<text class="other-text">{{getTimeDiff(dynamic.createTime)}} {{ dynamic.place }}</text>
						</view>
						<!-- <image class="title-img" src="/static/more.png"></image> -->
					</view>
					<view class="dynamic-content-box" @click="dynamicDetail(dynamic)">
						<text class="content-text">{{ dynamic.content }}</text>
						<social-img-view :imgs="dynamic.images" v-if="dynamic.images"></social-img-view>
					</view>
					<view class="control-box">
						<view class="control-item" @click="likeDynamic(dynamic)">
							<image class="control-like-img"
								:src="dynamic.click ? '/static/feelLike-on.png' : '/static/feelLike.png'"></image>
							<text class="item-text">{{ dynamic.clicks ? dynamic.clicks : 0 }}</text>
						</view>
						<view class="control-item">
							<image class="control-comment-img" src="/static/feelComment.png"></image>
							<text class="item-text">{{ dynamic.comments ? dynamic.comments : 0 }}</text>
						</view>
					</view>
				</view>
				<view style="height: 40rpx;"></view>
				<uni-load-more :status="status" :contentText="contentText"></uni-load-more>
				<view style="height: 40rpx;"></view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userInfo: {},
				userActivity: [],
				userDynamic: [],
				safeTop: 0,
				safeBottom: 0,
				userId: 0,
				index: 0,
				interests: [],
				status: 'noMore',
				contentText: {
					contentdown: "上拉显示更多",
					contentrefresh: "正在加载...",
					contentnomore: "没有更多数据了"
				},
			};
		},
		onLoad(q) {
			this.safeTop = this.$safeTop;
			this.safeBottom = this.$safeBottom;
			this.userId = q.userId;
			this.initData();
		},
		methods: {
			initData() {
				this.getUserInfo();
				this.getUserPublishActivities();
				this.getUserDynamic();
			},
			getUserInfo() {
				const params = {
					userId: this.userId
				}
				this.$apis.getUserInfo(params).then(res => {
					if (res.code === 0) {
						this.userInfo = res.data;
					}
				})
			},
			getUserPublishActivities() {
				const params = {
					pageSize: 50,
					pageNum: this.activityPageNum,
					orderByColumn: 'create_time',
					isAsc: 'desc',
					userId: this.userId
				}
				this.$apis.getMyPublishActivities(params).then(res => {
					if (res.code === 0) {
						this.userActivity = res.data.list;
					}
				});
			},
			getUserDynamic() {
				const params = {
					pageSize: 50,
					pageNum: this.dynamicPageNum,
					orderByColumn: 'create_time',
					isAsc: 'desc',
					userId: this.userId
				}
				this.$apis.getMyDynamic(params).then(res => {
					if (res.code === 0) {
						this.userDynamic = res.data.list;
					}
				});
			},
			jumpToList(type) {
				uni.navigateTo({
					url: `/pages/likeOrJoinList?type=${type}&userId=${this.userId}`
				})
			},
			jumpToUserList(type) {
				uni.navigateTo({
					url: `/pages/followOrFansList?type=${type}&userId=${this.userId}`
				})
			},
			changeIndex(index) {
				if (this.index !== index) {
					this.index = index;
				}
			},
			getTimeDiff(startTime) {
				var new_date = new Date();
				var old_date = new Date(startTime);
				var diffMinutes = parseInt((new_date - old_date) / 1000 / 60);
				var hours = parseInt(diffMinutes / 60);
				var days = parseInt(diffMinutes / 60 / 24);
				var month = parseInt(diffMinutes / 60 / 24 / 31);
				var year = parseInt(diffMinutes / 60 / 24 / 31 / 12);
				let timeStr = diffMinutes + '分钟前';
				if (hours > 0) {
					timeStr = hours + '小时前';
				}
				if (days > 0) {
					timeStr = days + '天前';
				}
				if (month > 0) {
					timeStr = month + '个月前';
				}
				if (year > 0) {
					timeStr = yesr + '年前';
				}
				return timeStr;
			}
		}
	}
</script>

<style lang="scss">
	.main-box {
		width: 100vw;

		.bg-box {
			background-repeat: no-repeat;
			background-size: cover;
			background-position: center;
			border-radius: 0px 0px 46rpx 46rpx;

			.user-backgroud-img {
				width: 100%;
				height: 960rpx;
				background-color: rgba(0, 0, 0, 0.1);
				border-radius: 0px 0px 46rpx 46rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				position: relative;

				.navigator-bar {
					width: 100%;
					height: 84rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;

					.navigator-img {
						width: 80rpx;
						height: 80rpx;
						margin-right: 32rpx;
						margin-left: 32rpx;
					}
				}

				.avatar-box {
					width: 160rpx;
					height: 160rpx;
					border-radius: 80rpx;
					border: 3rpx solid #FFFFFF;
					background-color: white;
					margin-top: 50rpx;

					.avatar-img {
						width: 160rpx;
						height: 160rpx;
						border-radius: 80rpx;
					}
				}

				.nickname-text {
					font-size: 44rpx;
					font-weight: bold;
					color: #FFFFFF;
					line-height: 60rpx;
					text-shadow: 0px 2rpx 0px rgba(0, 0, 0, 0.5);
					margin-top: 32rpx;
				}

				.user-info-box {
					display: flex;
					align-items: center;
					margin-top: 24rpx;

					.user-info-text {
						font-size: 28rpx;
						font-weight: bold;
						color: #FFFFFF;
						line-height: 40rpx;
						text-shadow: 0px 2rpx 0px rgba(0, 0, 0, 0.5);
					}

					.score-text {
						width: 144rpx;
						height: 34rpx;
						background: linear-gradient(270deg, #FF9948 0%, #F6C210 100%);
						border-radius: 20rpx;
						font-size: 20rpx;
						font-weight: bold;
						line-height: 34rpx;
						color: #FFFFFF;
						text-align: center;
						margin-left: 26rpx;
					}
				}

				.interest-box {
					margin-top: 24rpx;

					.interest-text {
						font-size: 24rpx;
						font-weight: bold;
						color: #FFFFFF;
						padding: 0 24rpx 0 24rpx;
					}
				}

				.introduction-text {
					margin-top: 24rpx;
					font-size: 28rpx;
					font-weight: bold;
					color: #FFFFFF;
				}

				.count-box {
					margin-top: 48rpx;
					width: 686rpx;
					display: flex;
					justify-content: space-between;

					.count-text {
						width: 220rpx;
						text-align: center;
						font-size: 32rpx;
						font-weight: bold;
						color: #FFFFFF;
					}
				}

				.partake-box {
					width: 686rpx;
					height: 200rpx;
					background: #FFFFFF;
					box-shadow: 0px 0px 30rpx 0px rgba(0, 0, 0, 0.1);
					border-radius: 28rpx;
					margin-top: 32rpx;
					display: flex;
					align-items: center;
					position: absolute;
					bottom: -100rpx;
					justify-content: space-evenly;

					.partake-item {
						display: flex;
						flex-direction: column;
						align-items: center;
						width: 220rpx;

						.partake-count {
							font-size: 56rpx;
							font-weight: bold;
							color: #FF5E2E;
						}

						.partake-title {
							font-size: 28rpx;
							font-weight: 400;
							color: #222222;
						}
					}

					.partake-line {
						width: 2rpx;
						height: 40rpx;
						background: #F0F3F6;
					}
				}
			}
		}

		.tab-bar-box {
			display: flex;
			margin-left: 32rpx;
			margin-top: 140rpx;

			.choose-tab-bar {
				font-size: 32rpx;
				font-weight: bold;
				color: #222222;
				margin-right: 48rpx;
			}

			.unchoose-tab-bar {
				font-size: 32rpx;
				font-weight: 400;
				color: #999999;
				margin-right: 48rpx;
			}
		}

		.my-activity-list {
			.activity-box {
				width: 686rpx;
				margin-left: 32rpx;
				margin-top: 48rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.img-box {
					width: 280rpx;
					height: 220rpx;

					.activity-img {
						width: 280rpx;
						height: 220rpx;
						border-radius: 28rpx;
					}
				}

				.content-box {
					width: 374rpx;
					height: 220rpx;
					display: flex;
					flex-direction: column;
					align-items: flex-start;
					justify-content: space-between;

					.activity-title-box {
						width: 100%;
						display: flex;
						justify-content: space-between;

						.activity-title {
							width: 100%;
							font-size: 28rpx;
							font-weight: bold;
							color: #222222;
							line-height: 28rpx;
						}

						.title-img {
							width: 6rpx;
							height: 26rpx;
							margin-top: 4rpx;
						}
					}


					.activity-labels {
						width: 100%;

						.label-item {
							display: inline-block;
							padding: 2rpx 8rpx 2rpx 8rpx;
							margin-right: 8rpx;
							background: #F6F7F9;
							border-radius: 15rpx;
							font-size: 20rpx;
							font-weight: 400;
							color: #666666;
						}
					}

					.price-box {
						width: 100%;
						display: flex;
						justify-content: space-between;
						align-items: center;

						.price-text {
							font-size: 32rpx;
							font-weight: bold;
							color: #FF5E2E;

							.price-unit {
								font-size: 20rpx;
							}
						}

						.free {
							font-size: 32rpx;
							font-weight: bold;
							color: #31B57E;
						}

						.user-box {
							position: relative;

							.user-num {
								height: 32rpx;
								padding: 0 12rpx 0 12rpx;
								background: #F6F7F9;
								border-radius: 24px;
								border: 2rpx solid #FFFFFF;
								font-size: 20rpx;
								font-weight: bold;
								color: #999999;
								line-height: 32rpx;
								z-index: 999;
								position: sticky;
							}

							.activity-avatar-box {
								width: 28rpx;
								height: 28rpx;
								border-radius: 16rpx;
								border: 2rpx solid #FFFFFF;
								position: absolute;
								top: -8rpx;

								.avatar-img {
									width: 28rpx;
									height: 28rpx;
									border-radius: 16rpx;
								}
							}
						}
					}

					.status-box {
						width: 100%;
						display: flex;
						justify-content: space-between;
						align-items: center;

						.concern-num {
							font-size: 24rpx;
							font-weight: 400;
							color: #999999;
						}

						.openning {
							width: 96rpx;
							height: 32rpx;
							border-radius: 16px;
							border: 1px solid #31B57E;
							font-size: 20rpx;
							font-weight: 400;
							color: #31B57E;
							line-height: 32rpx;
							text-align: center;
						}

						.close {
							width: 96rpx;
							height: 32rpx;
							border-radius: 16px;
							border: 1px solid #999999;
							font-size: 20rpx;
							font-weight: 400;
							color: #999999;
							line-height: 32rpx;
							text-align: center;
						}
					}
				}
			}
		}

		.my-dynamic-list {
			.social-item-box {
				width: 686rpx;
				margin-left: 32rpx;
				margin-top: 48rpx;

				.user-info-box {
					display: flex;
					justify-content: space-between;
					align-items: flex-start;

					.user-info {
						width: 400rpx;
						display: flex;
						flex-direction: column;
						justify-content: flex-start;

						.name-text {
							font-size: 28rpx;
							font-weight: bold;
							color: #222222;
						}

						.other-text {
							font-size: 24rpx;
							font-weight: 400;
							color: #999999;
						}
					}

					.title-img {
						width: 6rpx;
						height: 26rpx;
						margin-top: 4rpx;
					}
				}

				.dynamic-content-box {
					width: 100%;
					margin-top: 32rpx;

					.content-text {
						width: 100%;
						font-size: 32rpx;
						font-weight: 400;
						color: #222222;
						line-height: 44rpx;
					}
				}

				.control-box {
					display: flex;
					align-items: center;
					justify-content: space-between;
					width: 100%;
					margin-top: 20rpx;

					.control-item {
						width: 300rpx;
						display: flex;
						align-items: center;
						justify-content: center;

						.control-share-img {
							width: 32rpx;
							height: 32rpx;
						}

						.control-like-img {
							width: 32rpx;
							height: 30rpx;
						}

						.control-comment-img {
							width: 32rpx;
							height: 32rpx;
						}

						.item-text {
							font-size: 28rpx;
							font-weight: 400;
							color: #222222;
							margin-left: 24rpx;
						}
					}
				}
			}
		}
	}
</style>
